<template>
  <div class="list">
    <div class="title">
      <span class="border">{{titleContent}}</span>
      <i class="bottom-line"></i>
    </div>
    <slot name="content"></slot>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    titleContent: {
      type: String,
      default: "标题",
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.list {
  .title {
    position: relative;
    font-size: 18px;
    padding-top: 6px;
    padding-bottom: 4px;
    .border {
      border-left: 4px solid #ff9000;
      padding-left: 10px;
    }
    &::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 3px;
      height: 3px;
      background: url(~@/assets/image/map-img/circle.png) no-repeat;
    }
    &::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      width: 3px;
      height: 3px;
      background: url(~@/assets/image/map-img/circle.png) no-repeat;
      background-size: 100%;
    }
    .bottom-line {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: url(~@/assets/image/map-img/line.png) no-repeat center;
      background-size: 97%;
    }
  }
}
</style>